<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换肤功能</title>
</head>

<body>
    <div id="app">
        <div class="app-root" :class="themeClass">
            <div class="app-container">
                <!-- header -->
                <header class="hd">
                    <div class="menu"><i class="icon-liebiao"></i></div>
                    <div class="txt">{{msg}}</div>
                    <div class="more"><i class="icon-caozuo"></i></div>
                </header>
                <!-- main -->
                <main class="content">
                    <!-- banner -->
                    <div class="banner"></div>
                    <!-- icon -->
                    <nav class="nav-box">
                        <a class="item" v-for="item in books">
                            <i :class=`${item.icn}`></i>
                            <span>{{item.name}}</span>
                        </a>
                    </nav>
                    <!-- select -->
                    <div class="sel-box">
                        <select v-model="theme">
                            <option class="cell" value="default">点击</option>
                            <option class="cell" value="red">red</option>
                            <option class="cell" value="green">green</option>
                            <option class="cell" value="purple">purple</option>
                            <option class="cell" value="orange">orange</option>
                        </select>
                    </div>
                </main>
                <!-- footer -->
                <footer class="ft">
                    <a class="flex" v-for="item in flexs">
                        <i :class=`${item.icn}`></i>
                        <span>{{item.name}}</span>
                    </a>
                </footer>
            </div>
        </div>
    </div>
</body>

</html>